<template>
	<div class="archive">
		<div class="count">{{this.$route.params.tag || $t('header.archive')}}：{{count}}{{$t('archive.article')}}</div>
		<el-timeline>
			<el-timeline-item v-for="article in timeList" :key="article.article_id" :color="article.color" :timestamp="article.article_date" placement="top" @mouseenter="hoverLine(article)">
				<div class="line-item">
					<router-link :to="{path:'article/'+article.article_id}" tag="span">{{article.article_title}}</router-link>
				</div>
			</el-timeline-item>
		</el-timeline>
		<div class="block pagination">
			<el-pagination
					background=""
					@current-change="pageChange()"
					:current-page.sync="curPage"
					layout="prev, pager, next"
					:page-size="10"
					:total="count">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {getTimeList,getArticleCount} from "@/api/article";
	export default {
		name: 'archive',
		data() {
			return {
				timeList:[
					{
						"article_id":0,
						"article_title":"",
						"article_date":"2020-01-01 00:00:00"
					},
				],
				count:0,
				curPage:1,
			};
		},
		methods: {
			hoverLine(activity) {
				activity.color = "#409eff"
			},
			async init(curPage = 1, pageSize = 10) {
				this.count = await getArticleCount();
				this.timeList = await getTimeList(curPage,pageSize);
			},
			pageChange(){
				this.init(this.curPage,10);
			}
		},
		mounted() {
			this.init(1,10);
		}
	}
</script>

<style scoped>
	.line-item {
		display: inline-block;
	}

	.line-item:hover {
		cursor: pointer;
		color: #409EFF;
	}

	.count {
		margin-bottom: 20px;
		font-size: 20px;
		color: #E6A23C;
	}
</style>
